<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:searchBottom>
        <el-form class="search_prod search_prod1" label-width="94px">
          <el-form-item label="库存类型">
            <el-row class="tl mar_bottom_15">
              <el-radio-group
                v-model="extract_id"
                size="small"
                class="tl money-group"
                @change="getNewsAll(searchAll)"
              >
                <el-radio-button label="0"> 总部 </el-radio-button>
                <el-radio-button
                  :label="item.id"
                  v-for="(item, i) in extract_list"
                  :key="i"
                >
                  {{ item.title }}
                </el-radio-button>
              </el-radio-group>
            </el-row>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="商品图片" min-width="100">
            <template slot-scope="scope">
              <img
                style="width: 100px"
                :src="$fnc.getImgUrl(scope.row.product.piclink)"
              />
            </template>
          </el-table-column>

          <el-table-column label="编号" min-width="140">
            <template slot-scope="scope">
              {{
                scope.row.extract_id > 0
                  ? scope.row.sku.hid || "----"
                  : scope.row.hid || "----"
              }}
              <p>类型：{{ scope.row.product.types_cn || "----"}}</p>
            </template>
          </el-table-column>

          <el-table-column label="商品名称" min-width="220">
            <template slot-scope="scope">
              {{ scope.row.product.title }}
            </template>
          </el-table-column>

          <el-table-column label="规格" min-width="160">
            <template slot-scope="scope">
              {{ scope.row.sku_cn }}
            </template>
          </el-table-column>

          <el-table-column label="进货价" min-width="120">
            <template slot-scope="scope">
              {{
                scope.row.extract_id > 0
                  ? scope.row.sku.cost_price
                  : scope.row.cost_price | keepTwoNum
              }}
              元
            </template>
          </el-table-column>

          <el-table-column label="销售价" min-width="120">
            <template slot-scope="scope">
              {{
                scope.row.extract_id > 0
                  ? scope.row.sku.price
                  : scope.row.price | keepTwoNum
              }}
              元
            </template>
          </el-table-column>

          <el-table-column label="当前库存" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.stock }}
            </template>
          </el-table-column>

          <el-table-column label="所属级别" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.extract_id > 0 ? `分店` : `总部` }}
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="addShop(scope.row)"
              >
                流水
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>

<script>
import { productStockSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: productStockSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      extract_list: [],
      extract_id: 0,
    };
  },
  components: {},
  created() {
    this.getExtractListAll();
    this.getNewsAll();
  },
  methods: {
    addShop(item) {
      this.$router.push({
        path: "/index/shop/product_stock",
        query: {
          pid: item.pid,
          sku_iden: item.iden,
          sku_id: item.id,
        },
      });
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      params.extract_id = this.extract_id;

      this.$api.getShops.product_stock_query_stock(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    getExtractListAll() {
      this.$api.getShops.getExtractListAll({}).then((res) => {
        if (res.data.code == 200) {
          this.extract_list = res.data.result;
        }
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
};
</script>

<style>
</style>